.award {
  height: 100%;
  .award-container {
    display: flex;
    background: #fff;
    height: 100%;
    .award-preview, .editor {
      width: 50%;
      padding: 10px;
    }
    .award-preview {
      border-right: 1px solid #eee;
      display: flex;
      justify-content: center;
      .image-edit {
        position: relative;
        height: 100%;
        img {
          max-width: 100%;
          height: 100%;
        }
        .overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          .sprite {
            left: 0;
            top: 0;
            position: absolute;
            cursor: move;
            border: 1px solid transparent;
            user-select: none;
            &.active {
              border-color: cornflowerblue;
            }
            .variable {

            }
            img {
              -webkit-user-drag: none;
              display: block;
              width: 100%;
              height: 100%;
            }
            .resizers {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 0;
              .resizer {
                position: absolute;
                width: 8px;
                height: 8px;
                border: 1px solid #333;
                background-color: #fff;
                &.nw {
                  top: -4px;
                  left: -4px;
                  cursor: nw-resize;
                }
                &.ne {
                  top: -4px;
                  right: -4px;
                  cursor: ne-resize;
                }
                &.sw {
                  bottom: -4px;
                  left: -4px;
                  cursor: sw-resize;
                }
                &.se {
                  bottom: -4px;
                  right: -4px;
                  cursor: se-resize;
                }
              }
            }
          }
        }
      }
    }
    .editor {
      display: flex;
      flex-direction: column;
      .tool-buttons {
        display: flex;
        flex: none;
        button {
          height: 32px;
        }
        > * {
          margin-right: 5px;
        }
      }
      .buttons {
        display: flex;
        flex: none;
        button {
          height: 32px;
        }
        > * {
          margin-right: 5px;
        }
      }
      .fixed-fields {
        margin-top: 20px;
        border: 1px solid #ccc;
        padding: 5px;
        background-color: #f1f1f1;
        ul {
          display: flex;
          flex-wrap: wrap;
          .field {
            width: 100px;
            margin: 10px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid #999;
            cursor: pointer;
            &.disabled {
              color: #ccc;
              border-color: #ccc;
              cursor: not-allowed;
            }
          }
        }
      }
      .seals {
        margin-top: 20px;
        border: 1px solid #ccc;
        padding: 5px;
        background-color: #f1f1f1;
        overflow: auto;
        ul {
          display: flex;
          flex-wrap: wrap;
          .seal {
            width: 100px;
            margin: 10px;
            height: 160px;
            cursor: pointer;
            img {
              max-width: 100px;
              height: auto;
            }
            .organization {
              text-align: center;
            }
          }
        }
      }
    }
  }
  .file-picker {
    width: 80px;
    height: 32px;
    position: relative;
    button, input {
      position: absolute;
      top: 0;
      left: 0;
    }
    input {
      opacity: 0;
      width: 100%;
      height: 100%;
      cursor: pointer;
    }
  }
}

.bg-picker {
  .bg-picker-content {
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
    }
    ul li {
      margin-bottom: 10px;
      cursor: pointer;
      border: 2px solid #eee;
      width: auto;
      height: 287px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    ul li:hover {
      border-color: #adffcd;
    }
    ul li img {
      width: 200px;
      height: auto;
      display: block;
    }
  }
  .ivu-modal-footer {
    display: none;
  }
}